<template>
	<view class="balance" v-if="myInfo.user_info && shenheStatus == 0">
		<singleHeader pageTitle="我的联盟券"></singleHeader>

		<view class="header module">
			<view class="headerTit">联盟券数额</view>
			<view class="headerNum" v-if="type === '1'">{{ league_price}}</view>
			<view class="headerNum" v-else>{{ myInfo.user_info.integral }}</view>
			<!--  <view class="arr" @click="goList">
        <view>{{ $t("integral.viewDetails") }}</view>
        <i class="iconfont icon-arrow-right"></i>
      </view> -->

			<!--   <view class="headerBtn">
        <view
          v-if="type === '1' && myInfo.balance_to_commission === 1"
          class="btn"
          @click="$utils.toUrl('/user/balance/balance-bonus', 'navigate')"
        >
          <view>{{ $t("user.balance") }}</view>
        </view>
        <view
          v-if="type === '1'"
          class="btn"
          @click="$utils.toUrl('/user/balance/recharge', 'navigate')"
        >
          <view class="on">{{ $t("person.pay") }}</view>
        </view>
        <view
          v-if="type === '2'"
          class="btn"
          @click="$utils.toUrl('/integral/integralStore/index', 'navigate')"
        >
          <view class="on">{{ $t("integral.mall") }}</view>
        </view>
      </view> -->
		</view>

		<view class="list module">
			<view class="listTitle">
				<view class="let">联盟券明细</view>

				<!-- <view class="arr" @click="goList">
          <view>查看全部</view>
          <i class="iconfont icon-arrow-right"></i>
        </view> -->
			</view>

			<scroll-view v-if="type === '1'" :scroll-y="true" class="lists" lower-threshold="0" @scrolltolower="scrollevent" >
				<view class="detailBox" v-for="(item, index) in detailList" :key="index">
					<view class="detail">
						<view class="type">
							<text>{{ item.show_desc }}</text>
							<text>{{ item.show_time }}</text>
						</view>
						<view class="count" :class="[getClass(item.log_type)]">{{ item.show_price }}</view>
					</view>
				</view>
			</scroll-view>
			<view v-else>
				<view class="detailBox" v-for="(item, index) in detailList" :key="index">
					<view class="detail">
						<view class="type">
						<text>{{ item.show_desc }}</text>
						<text>{{ item.show_time }}</text>
						</view>
						<view class="count" :class="[getClass(item.log_type)]">{{ item.log_type == 1 ? '+' : '-' }}{{ item.amount }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import singleHeader from '@/components/diySystemPage/components/singleHeader/index.vue';

export default {
	components: {
		Shenhe,
		singleHeader
	},

	data() {
		return {
			myInfo: {},
			isHidden: false,
			type: '1',
			detailList: [],
			page: 1,
			league_price:''
		};
	},

	filters: {
		date(e) {
			let date = new Date(e * 1000);
			let Y = date.getFullYear();
			let M = date.getMonth() + 1;
			let d = date.getDate();
			let h = date.getHours();
			let m = date.getMinutes();
			h = h >= 10 ? h : '0' + h;
			m = m >= 10 ? m : '0' + m;
			return Y + '-' + M + '-' + d + ' ' + h + ':' + m;
		}
	},

	computed: {
		getClass() {
			return type => {
				return type === '1' ? 'on' : '';
			};
		},

		getTitle() {
			let { type } = this,
				list = [];
			if (type === '1') {
				list[0] = this.$t('person.myBalance');
				list[1] = this.$t('person.balance');
				list[2] = this.$t('user.detail');
			} else {
				list[0] = this.$t('shop.integral');
				list[1] = `我的${this.stores.integral_name}`;
				list[2] = this.$t('integral.detail');
			}

			return list;
		}
	},

	onLoad(opi) {
		this.balance();
		this.$utils.hideShareMenu();
		this.type = opi.type || '1';
		this.getMyinfo();
	},

	onShow() {
		// this.detailList = [];
		// this.getMyinfo();
		// this.getList();
	},

	methods: {
		scrollevent(){
			this.page++;
			this.balance();
		},
		timestampToTime(timestamp) {
		        var date = new Date(timestamp * 1000);
		        var Y = date.getFullYear() + '-';
		        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		        var D = date.getDate() + ' ';
		        var h = date.getHours() + ':';
		        var m = date.getMinutes() + ':';
		        var s = date.getSeconds();
		        return Y+M+D+h+m+s;
		    },
		async balance() {
			const result = await this.$allrequest.user.new_recharge_list({
				page: this.page,
				type: -1
			});
			this.league_price=result.data.league_price;
			this.detailList.push(...result.data.list);
		},
		// 获取详情列表
		// async getList() {
		// 	try {
		// 		let { type } = this;

		// 		if (type == '1') {
		// 			const res = await this.$allrequest.user.recharge_list({
		// 				page: 1,
		// 				type: -1
		// 			});

		// 			if (res.code != 0) throw res;
		// 			this.detailList.push(...res.data.list);
		// 			this.page++;
		// 		} else {
		// 			this.$allrequest.integral
		// 				.myIntegralList({
		// 					type: 0
		// 				})
		// 				.then(res => {
		// 					if (res.code == 0) {
		// 						this.detailList = res.data;
		// 					}
		// 				});
		// 		}
		// 	} catch (e) {
		// 		//TODO handle the exception
		// 	}
		// },

		// goList() {
		//   let { type } = this;

		//   if (type === "1") {
		//     this.$utils.toUrl("/user/balance/balance-detail", "navigate");
		//   } else {
		//     this.$utils.toUrl("/integral/integral/myIntegralDetail", "navigate");
		//   }
		// },

		async getMyinfo() {
			try {
				const res = await this.$allrequest.request.userindex({}, true);
				if (res.code != 0) throw res;
				this.myInfo = res.data;
			} catch (error) {
				this.$utils.toast(error.msg);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.balance {
	// padding: 24rpx 24rpx calc(env(safe-area-inset-bottom) + 10rpx);
	padding: 24rpx;
	// min-height: 100vh;
	background: #f2f2f2;
	height: 100vh;
}

.module {
	margin-bottom: 24rpx;
	border-radius: 20rpx;
	background: #fff;
}

.header {
	padding: 64rpx 20rpx;
	text-align: center;
}

.headerTit {
	font-size: 24rpx;
	color: #262626;
}

.headerNum {
	padding: 10rpx 0;
	font-size: 84rpx;
	font-weight: bold;
}

.arr {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8c8c8c;

	.iconfont {
		font-size: 24rpx;
		color: #8c8c8c;
	}
}

.headerBtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 72rpx;

	.btn {
		margin: 0 15rpx;
		flex: 1;
		overflow: hidden;

		view {
			background: #f4f4f4;
			height: 88rpx;
			line-height: 88rpx;
			overflow: hidden;
			color: #262626;
			border-radius: 32px;
			font-size: 32rpx;

			&.on {
				background: #f0250e;
				color: #fff;
			}
		}
	}
}

.listTitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20rpx;

	.let {
		flex: 1;
		font-size: 34rpx;
		font-weight: bold;
		color: #262626;
	}
}

.list {
	padding: 24rpx;
	height: calc(100% - 428rpx);
	.lists{
		height: calc(100% - 65rpx);
	}
}

.detailBox {
	width: 100%;
	background-color: #fff;
	.detail {
		padding: 24rpx 0;
		border-bottom: 1px solid #f2f2f2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.type {
			width: 500rpx;
			max-width: 500rpx;
			display: flex;
			flex-direction: column;
			font-family: PingFang SC;
			font-size: 28rpx;
			color: #262626;
			text:nth-child(1) {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			text:nth-child(2) {
				font-size: 24rpx;
				color: #8c8c8c;
				margin-top: 4rpx;
			}
		}
		.count {
			font-size: 36rpx;
			color: #f84f11;
			font-weight: 600;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			&.on {
				color: #f84f11;
			}
		}
	}
}
.detailBox:last-child {
	.detail {
		border-bottom: none;
	}
}
</style>
